<template>
  <div class="blog-home">
    <layoutLeftRight>
      <!-- 插槽 -->
      <template v-slot:left>
        <div class="home-content__left">
          <div class="user-info">
            <div class="avatar">
              <img src="@/assets/avatar.jpg" alt="">
            </div>
            <div class="user-desc">
              <p class="name"> 朱涛 </p>
              <p class="describle">专业小码农 为你排忧解难</p>
              <p class="tag">
                <span>前端开发</span>
                <span>人工智能</span>
                <span>全栈开发</span>
              </p>
            </div>
          </div>
          <div class="news-article">
            <div class="title">最新文章</div>
            <div class="article-list">
              <div class="article-item" v-for="item in newsArticleList" :key="item.id">
                <div class="article-pic">
                  <img :src="item.article_cover_pic" alt="">
                </div>
                <div class="article-desc">
                  <div class="name">{{ item.title }}</div>
                  <div class="introduce">{{ item.article_desc }}</div>
                  <div class="time">
                    <span>{{ formateDate(item.create_time) }}</span>
                    <!-- 跳转携带页码id -->
                    <router-link :to="{ path: '/detail', query: { id: item.id } }">阅读更多</router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 插槽 -->
      <template v-slot:right>
        <div class="home-model__right">
          <Category />
          <Callme class="mt32" />
        </div>
      </template>
    </layoutLeftRight>
  </div>
</template>

<script setup>
// 自定义左右布局
import layoutLeftRight from '@/components/layoutLeftRight.vue';
import Category from '@/components/Category.vue';
import Callme from '@/components/Callme.vue';
import { getNewsArticleList } from '@/api/index.js';
import { onMounted, ref } from 'vue';
// 解析时间戳 
import { formateDate } from '@/utils/formateDate.js';

const newsArticleList = ref([])

onMounted(async () => {
  const res = await getNewsArticleList()
  console.log(res);
  newsArticleList.value = res.data
})

</script>

<style lang="less" scoped>
.blog-home {
  .home-content__left {
    .user-info {
      padding: 24px;
      background-color: #FFFFFF;
      border-radius: 8px;
      display: flex;
      align-items: center;

      .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 16px;

        img {
          height: 100%;
          width: 100%;
          object-fit: cover
        }
      }

      .user-desc {
        .name {
          font-size: 20px;
          font-weight: 600;
          line-height: 28px;
          margin-bottom: 8px;
        }

        .describle {
          font-weight: 400;
          font-size: 16px;
          color: #4B5563;
          line-height: 24px;
          margin-bottom: 12px;
        }

        .tag {
          span {
            font-weight: 400;
            font-size: 14px;
            color: #4B5563;
            line-height: 20px;
            padding: 4px 12px;
            background-color: #F3F4F6;
            border-radius: 100px;
            margin-right: 8px;
            display: inline-block;
          }
        }
      }
    }

    .news-article {
      margin-top: 32px;

      .title {
        font-weight: 600;
        font-size: 20px;
        color: #000000;
        line-height: 28px;
        margin-bottom: 24px;
      }

      .article-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;

        .article-item {
          border-radius: 8px;
          overflow: hidden;

          .article-pic {
            width: 100%;
            height: 192px;
            overflow: hidden;

            img {
              height: 100%;
              width: 100%;
            }
          }

          .article-desc {
            padding: 24px;
            background-color: #fff;

            .name {
              font-weight: 600;
              font-size: 18px;
              color: #000000;
              line-height: 28px;
              margin-bottom: 8px;
            }

            .introduce {
              font-weight: 400;
              font-size: 14px;
              color: #4B5563;
              line-height: 20px;
              margin-bottom: 16px;
            }

            .time {
              font-weight: 400;
              font-size: 14px;
              color: #6B7280;
              line-height: 20px;
              display: flex;
              justify-content: space-between;

              a {
                color: #71377E;
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1200px) {
    .home-model__right {
      display: none;
    }
  }
}
</style>